<template>
  <div v-if="!filterShow" class="flex justify-end mb-5">
    <a-button type="primary" @click="handleFilter"> 查看符合筛选条件下所有车辆的购车其他费用 </a-button>
  </div>
  <list-searcher v-if="filterShow" :searchList="searchList" v-model:searchForm="queryParams" @loadData="handleSubmit" />
  <table-index :table="table" @loadData="loadData">
    <template #time="{ record }">
      <div v-if="record.startTime || record.endTime">
        <div v-if="record.startTime">{{ record.startTime }}</div>
        <div v-if="record.endTime">{{ record.endTime }}</div>
      </div>
      <div v-else> - </div>
    </template>
    <template #transferFee="{ record }">
      <div v-if="record.transferFee">
        <div>{{ record.transferFee }} ({{ record.transferFeeStatusName }})</div>
      </div>
      <div v-else> - </div>
    </template>
    <template #transportFee="{ record }">
      <div v-if="record.transportFee">
        <div>{{ record.transportFee }} ({{ record.transportFeeStatusName }})</div>
      </div>
      <div v-else> - </div>
    </template>
    <template #earnestMoney="{ record }">
      <div v-if="record.earnestMoney">
        <div>{{ record.earnestMoney }} ({{ record.earnestMoneyStatusName }})</div>
      </div>
      <div v-else> - </div>
    </template>
    <template #serviceChargeFee="{ record }">
      <div v-if="record.serviceChargeFee">
        <div>{{ record.serviceChargeFee }} ({{ record.serviceChargeFeeStatusName }})</div>
      </div>
      <div v-else> - </div>
    </template>
  </table-index>
</template>

<script setup lang="ts">
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { ref, inject, onMounted, computed, reactive } from 'vue'
  import { purchaseOtherFeeAPI } from '@/api/dashboard/account'

  const modalStatus = inject<any>('modalStatus')

  const filterShow = ref(false)
  const searchList = [
    {
      label: '车牌号',
      prop: 'licenseNo',
      type: 'a-input',
    },
  ]

  const table = useTable({
    columns: [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
      },
      {
        title: '所选时间',
        dataIndex: 'time',
        slotName: 'time',
      },
      {
        title: '总额',
        dataIndex: 'totalAmount',
        unit: '元',
      },
      {
        title: '过户费',
        dataIndex: 'transferFee',
        slotName: 'transferFee',
        unit: '元',
      },
      {
        title: '运输费',
        dataIndex: 'transportFee',
        slotName: 'transportFee',
        unit: '元',
      },
      {
        title: '保证金',
        dataIndex: 'earnestMoney',
        slotName: 'earnestMoney',
        unit: '元',
      },
      {
        title: '手续费',
        dataIndex: 'serviceChargeFee',
        slotName: 'serviceChargeFee',
        unit: '元',
      },
    ],
  })

  const parentQueryParam = computed(() => modalStatus.queryParams)

  const queryParams = reactive<any>({
    carId: parentQueryParam.value.carId,
    orgIdList: parentQueryParam.value.orgIdList,
    startTime: parentQueryParam.value.startTime,
    endTime: parentQueryParam.value.endTime,
    profitFlag: parentQueryParam.value.profitFlag,
  })

  const loadData = useFetchTableDataApi(table, queryParams, purchaseOtherFeeAPI)

  const handleSubmit = () => {
    queryParams.licenseNoLike = queryParams.licenseNo
    loadData()
  }

  onMounted(() => {
    loadData()
  })

  const handleFilter = () => {
    filterShow.value = true
    queryParams.carId = null
    loadData()
  }
</script>

<style scoped lang="less"></style>
